import React, { useEffect, useState } from 'react'
import { Toast, NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import axios from '../../utils/index'
import style from './index.module.css'

const Index: React.FC = () => {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const aaa = async () => {
        const res = await axios.get('/api/yi')
        if (res.data.code == 200) {
            setList(res.data.yi)
            console.log(res.data.yi);
        }
    }
    useEffect(() => {
        aaa()
    }, [])

    // 每次显示的数据条数
    const itemsToShow = 3;
    // 当前显示的数据索引
    const [currentIndex, setCurrentIndex] = useState(0);
    // 计算当前显示的数据
    const currentData = list.slice(currentIndex, currentIndex + itemsToShow);
    // 处理“换一换”按钮点击事件
    const handleSwitch = () => {
    // 计算下一个索引，如果超出数据长度，则重置为0
    const nextIndex = (currentIndex + itemsToShow) % (list.length - itemsToShow + 1);
    setCurrentIndex(nextIndex);
    };
    return (
        <div>
            <NavBar
                title="消息"
                rightText="全部已读"
                onClickLeft={() => navigate(-1)}
                onClickRight={() => Toast('全部已读')}
            />
            <div className={style.box}>
                你可能想了解 <button className={style.btn} onClick={handleSwitch}>换一换</button>
            </div>


            {
                currentData.map((item: any, index: number) => (
                     <div key={index}>
                        <div className={style.uu}>
                           <div>
                             <img src={item.img} alt="" style={{ width: '100px', height: '100px', borderRadius: '50%', marginTop: '20px' }} />
                           </div>
                            <div>
                               <p className={style.pp1}><b style={{fontSize: '20px'  }}>{item.name}</b> {item.zhu} {item.shen}</p>  <br />
                               <p className={style.pp2}>{item.bei} <p className={style.pp3}>{item.san}</p></p><br />
                               <p>擅长：{item.shang}</p>
                            </div>
                        </div>
                    </div>
                ))
            }
        </div>
    )
}

export default Index
